<script>
import { api } from '@/api';
import { Button, Field, Form, NavBar, Toast } from 'vant';

export default {
  components: {
    Form,
    Field,
    Button,
    NavBar
},
  computed: {
  },
  data() {
    return {
      userName:'',
      mobile: '',
      newPassword: '',
      confirmNewPassword: ''
    }
  },
  methods: {
    async onSubmit(data) {
      const res = await api.account.resetPassword({
        userName:data.userName,
        mobile: data.mobile,
        newPwd: data.newPassword
      })

      if (res.success) {
        Toast.success({ message: '重置成功' })
        this.mobile = this.newPassword = this.confirmNewPassword = ''
      } else {
        Toast.fail({ message: res.data ?? '重置失败' })
      }
    }
  },
}
</script>

<template>
  <div class="change-password-container">
    <NavBar title="重置密码" :border="false" @click-left="$router.back()" left-arrow  />
    
    <Form @submit="onSubmit">
      <Field v-model="userName" label="用户名" name="userName" type="text" placeholder="请输入用户名" size="large" autocomplete="userName"
        :rules="[{ required: true, message: '请填写手机号码' }]" />
      <Field v-model="mobile" label="手机号码" name="mobile" type="tel" placeholder="请输入手机号码" size="large" autocomplete="mobile"
        :rules="[{ required: true, message: '请填写手机号码' }]" />
      <Field v-model="newPassword" label="新密码" name="newPassword" type="password" placeholder="请输入新密码" size="large" autocomplete="newPassword"
        :rules="[{ required: true, message: '请填写新密码' }]" />
      <Field v-model="confirmNewPassword" label="再次确认" name="confirmNewPassword" type="password" placeholder="请再次输入新密码" size="large" autocomplete="confirmNewPassword"
        :rules="[
          { required: true, message: '请再次填写新密码' },
          { validator: (val) => val === this.newPassword, message: '两次密码不一致' }
        ]" />
      <div class="submit-button-container">
        <Button round block size="large" type="primary" native-type="submit">
          重置密码
        </Button>
      </div>
    </Form>
  </div>
</template>

<style lang="less" scoped>
.change-password-container {
  height: 100%;
  background-image: linear-gradient(to bottom, #63c178, #67c290 5%, #f3f4f8 15%, #f3f4f8);

  .submit-button-container {
    padding: 0 10px;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
